<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="assets/css/ux_naver.css" rel="stylesheet">
<style type="text/css">
.content_sec {
	position: fixed;
	top: 0;
	left: 240px;
	right: 0px;
	height: 100%;
	background-color: white;
}
</style>
<script type="text/javascript" src="assets/js/jindo.desktop.all.js"></script>
<script type="text/javascript" src="assets/js/jindo_component.js"></script>
<script type="text/javascript" src="assets/js/jindo_mobile_component.js"></script>

<title>네이버 UX::반응형 웹</title>
</head>
<body>
	<header class="main_header">
		
		<nav class="category_navi">
			<ul>
				<li>category1</li>
				<li>category2</li>
				<li>category3</li>
				<li>category4</li>
			</ul>
		</nav>
	</header>

	<section class="main_container">
		<div id="mflick">
			<div class="flick-container">
				<div class="flick-ct">
					<h3>category1</h3>
					<article class="service_tile">
						<div>
							<button onclick="openContent('http://www.naver.com');">네이버</button>
						</div>
					</article>
					<article class="service_tile">
						<div>
							<button onclick="openContent('http://www.daum.net');">다음</button>
						</div>
					</article>
					<article class="service_tile">
						<div>
							<button>sss</button>
						</div>
					</article>
					<article class="service_tile">
						<div>
							<button>sss</button>
						</div>
					</article>
					<article class="service_tile">
						<div>
							<button>sss</button>
						</div>
					</article>
					<article class="service_tile">
						<div>
							<button>sss</button>
						</div>
					</article>
					<article class="service_tile">
						<div>
							<button>sss</button>
						</div>
					</article>
					<article class="service_tile">
						<div>
							<button>sss</button>
						</div>
					</article>
					<article class="service_tile">
						<div>
							<button>sss</button>
						</div>
					</article>
					<article class="service_tile">
						<div>
							<button>sss</button>
						</div>
					</article>
					<article class="service_tile">
						<div>
							<button>sss</button>
						</div>
					</article>
					<article class="service_tile">
						<div>
							<button>sss</button>
						</div>
					</article>
				</div>
				<div class="flick-ct">
					<h3>category2</h3>
					<article class="service_tile">
						<div>
							<button>sss</button>
						</div>
					</article>
					<article class="service_tile">
						<div>
							<button>sss</button>
						</div>
					</article>
					<article class="service_tile">
						<div>
							<button>sss</button>
						</div>
					</article>
					<article class="service_tile">
						<div>
							<button>sss</button>
						</div>
					</article>
					<article class="service_tile">
						<div>
							<button>sss</button>
						</div>
					</article>
					<article class="service_tile">
						<div>
							<button>sss</button>
						</div>
					</article>
					<article class="service_tile">
						<div>
							<button>sss</button>
						</div>
					</article>
					<article class="service_tile">
						<div>
							<button>sss</button>
						</div>
					</article>
					<article class="service_tile">
						<div>
							<button>sss</button>
						</div>
					</article>
					<article class="service_tile">
						<div>
							<button>sss</button>
						</div>
					</article>
					<article class="service_tile">
						<div>
							<button>sss</button>
						</div>
					</article>
					<article class="service_tile">
						<div>
							<button>sss</button>
						</div>
					</article>
				</div>
				<div class="flick-ct">
					<h3>category3</h3>
					<article class="service_tile">
						<div>
							<button>sss</button>
						</div>
					</article>
					<article class="service_tile">
						<div>
							<button>sss</button>
						</div>
					</article>
					<article class="service_tile">
						<div>
							<button>sss</button>
						</div>
					</article>
					<article class="service_tile">
						<div>
							<button>sss</button>
						</div>
					</article>
					<article class="service_tile">
						<div>
							<button>sss</button>
						</div>
					</article>
					<article class="service_tile">
						<div>
							<button>sss</button>
						</div>
					</article>
					<article class="service_tile">
						<div>
							<button>sss</button>
						</div>
					</article>
					<article class="service_tile">
						<div>
							<button>sss</button>
						</div>
					</article>
					<article class="service_tile">
						<div>
							<button>sss</button>
						</div>
					</article>
					<article class="service_tile">
						<div>
							<button>sss</button>
						</div>
					</article>
					<article class="service_tile">
						<div>
							<button>sss</button>
						</div>
					</article>
					<article class="service_tile">
						<div>
							<button>sss</button>
						</div>
					</article>
				</div>
			</div>
		</div>



	</section>

	<section class="sub_container">
		<section class="login">
			<fieldset class="login_set">
				<input type="text" class="login_input" id="userid"> <input
					type="password" class="login_input" id="userpw">
				<button id="btnLogin">로그인</button>
				<button>회원가입</button>
			</fieldset>
			<fieldset class="login_set">
				<h5>test</h5>
				<button id="btnLogout">로그아웃</button>
			</fieldset>
		</section>
	</section>


	<script type="text/javascript">
		jindo.$Element("btnLogin").attach("click", loginReq);
		jindo.$Element("btnLogout").attach("click", logoutReq);

		var userInfoAjax = new $Ajax('service', {
			type : 'xhr',
			method : 'post',
			timeout : 3,
			ontimeout : function() {
				alert("Timeout!");
			},
			async : true
		});

		function loginReq() {
			alert("loginReq : " + jindo.$Element("userid").text() + '/'
					+ jindo.$Element("userpw").text());
			
			
			userInfoAjax.header("command", "login");
			userInfoAjax.option("onload", loginRes);
			if (userInfoAjax.isIdle()) {
				userInfoAjax.request({
					userid : jindo.$Element("userid").text(),
					userpw : jindo.$Element("userpw").text()
				});
			} else {
				alert("jindo.$Ajax() 객체가 현재 요청 대기 상태가 아닙니다.")
			}
		}
		function loginRes(res) {
			alert("loginRes : " + res.text());
		}
		
		
		
		
		
		function logoutReq() {
			alert("logoutReq");
			userInfoAjax.header("command", "logout");
			userInfoAjax.option("onload", logoutRes);
			userInfoAjax.request();
		}
		function logoutRes(res) {
			alert("logoutRes : " + res.status() + res.readyState() + res.text());
		}

		function checkReq() {
			alert("checkReq");
			userInfoAjax.header("command", "check");
			userInfoAjax.option("onload", checkRes);
			userInfoAjax.request();
		}

		function checkRes(res) {
			alert("checkRes : " + res.text());
		}

		function displayUserInfo(bool) {

		}
	</script>




















	<script type="text/javascript" src="assets/js/openContent.js"></script>


	<script type="text/javascript">
		//////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
		var oFlicking = new jindo.m.Flicking('mflick', {
			bHorizontal : true, //가로형 여부
			sClassPrefix : 'flick-', //Class의 prefix
			nDefaultIndex : 2, //로드시에 화면에 보이는 콘텐츠의 인덱스
			bAutoResize : true, //화면 사이즈 조정 여부 
			bUseCircular : false, //순환여부 
			sAnimation : "slide" //플리킹 애니메이션 타입  "slide", "cover" 사용가능
		}).attach({
			'afterFlicking' : function(oCustomEvt) {
				/* 현재 화면에 콘텐츠가 바뀔 경우 발생 */
			}
		});

		$Element("mflick").attach("mousewheel", rollingCtr);
		function rollingCtr(e) {
			var mouse = e.mouse();
			if (mouse.delta == -1) {
				oFlicking.moveNext(500);
				return false;
			}
			if (mouse.delta == 1) {
				oFlicking.movePrev(500);
				return false;
			}
		}
	</script>
</body>
</html>